<template>
    <div class="detect-box serve-select page ">
        <div class="hnli-popup hp3 flex-center">
            <div class="flex-center flex-left">
                <input v-model="query.text" class="search" style="background: #394760;height: 40px;" placeholder="方案名称">




                <button class="oval-button" style="height: 40px;">查 询</button>
            </div>
            <div class="flex-rgiht">
                <button class="oval-button flex-center" style="background: #FABD68;margin-right: 100px; height: 40px;"
                    @click="setCopy(true, null)">新建方案</button>
            </div>
        </div>
        <div class="detect-table">
            <div class="table-box detect-table-box flex" style="height: calc(100% - 0px);">
                <el-table :data="tableData" class=" custom-table" style="height: calc(100% - 50px);"
                    :row-class-name="getRowClassName" @row-click="handleRowClick">
                    <el-table-column prop="name" label="方案名称" align="center" />
                    <el-table-column prop="time" label="最近启动时间" align="center" />

                    <el-table-column label="操作" align="center" width="280">
                        <template #default="scope">
                            <div class="flex-img">

                                <el-popover placement="bottom" :width="150" trigger="hover">
                                    <template #reference>
                                        <div class="result flex-center" @click.stop.prevent @click="postRightList"><img
                                                src="@/assets/img/de1.png"
                                                style="width: 20px;height: 20px; margin-right: 5px;" /> 电台状态</div>
                                    </template>
                                    <template #default>
                                        <div class="detect-result">
                                            <div class="result flex-center"><img src="@/assets/img/de1.png"
                                                    class="flex-left"
                                                    style="width: 20px;height: 20px; margin-right: 5px;" /><text
                                                    class="flex-left"> 电台状态</text></div>
                                            <el-scrollbar style="height: 180px;">
                                                <div class="flex-center tooltip">
                                                    <el-tooltip effect="dark" content="(主)重庆万州(主)重庆万州(主)重庆万州"
                                                        placement="top">
                                                        <div class="ellipsis-text flex-left">(主)重庆万州(主)重庆万州</div>
                                                    </el-tooltip>
                                                    <img src="@/assets/img/xq1.png" class="flex-right"
                                                        style="width: 18px;height: 18px;margin-left: 2px;" />
                                                </div>
                                                <div class="flex-center tooltip">
                                                    <el-tooltip effect="dark" content="(从)重庆万州(主)重庆万州" placement="top">
                                                        <div class="ellipsis-text flex-left">(从)重庆万州(主)重庆万州</div>
                                                    </el-tooltip>
                                                    <img src="@/assets/img/xq1.png" class="flex-right"
                                                        style="width: 18px;height: 18px;margin-left: 2px;" />
                                                </div>
                                                <div class="flex-center tooltip">
                                                    <el-tooltip effect="dark" content="(主)重庆万州(主)重庆万州(主)重庆万州"
                                                        placement="top">
                                                        <div class="ellipsis-text flex-left">(主)重庆万州(主)重庆万州</div>
                                                    </el-tooltip>
                                                    <img src="@/assets/img/xq3.png" class="flex-right"
                                                        style="width: 18px;height: 18px;margin-left: 2px;" />
                                                </div>
                                                <div class="flex-center tooltip">
                                                    <el-tooltip effect="dark" content="(主)重庆万州(主)重庆万州(主)重庆万州"
                                                        placement="top">
                                                        <div class="ellipsis-text flex-left">(主)重庆万州(主)重庆万州</div>
                                                    </el-tooltip>
                                                    <img src="@/assets/img/xq1.png" class="flex-right"
                                                        style="width: 18px;height: 18px;margin-left: 2px;" />
                                                </div>
                                                <div class="flex-center tooltip">
                                                    <el-tooltip effect="dark" content="重庆万州F006" placement="top">
                                                        <div class="ellipsis-text flex-left">重庆万州F006</div>
                                                    </el-tooltip>
                                                    <img src="@/assets/img/xq2.png" class="flex-right"
                                                        style="width: 18px;height: 18px;margin-left: 2px;" />
                                                </div>
                                                <div class="flex-center tooltip">
                                                    <el-tooltip effect="dark" content="重庆万州F006" placement="top">
                                                        <div class="ellipsis-text flex-left">重庆万州F006</div>
                                                    </el-tooltip>
                                                    <img src="@/assets/img/xq2.png" class="flex-right"
                                                        style="width: 18px;height: 18px;margin-left: 2px;" />
                                                </div>

                                                <div class="flex-center tooltip">
                                                    <el-tooltip effect="dark" content="重庆万州F006" placement="top">
                                                        <div class="ellipsis-text flex-left">重庆万州F006</div>
                                                    </el-tooltip>
                                                    <img src="@/assets/img/xq2.png" class="flex-right"
                                                        style="width: 18px;height: 18px;margin-left: 2px;" />
                                                </div>
                                                <div class="flex-center tooltip">
                                                    <el-tooltip effect="dark" content="重庆万州F006" placement="top">
                                                        <div class="ellipsis-text flex-left">重庆万州F006</div>
                                                    </el-tooltip>
                                                    <img src="@/assets/img/xq2.png" class="flex-right"
                                                        style="width: 18px;height: 18px;margin-left: 2px;" />
                                                </div>
                                                <div class="flex-center tooltip">
                                                    <el-tooltip effect="dark" content="重庆万州F006" placement="top">
                                                        <div class="ellipsis-text flex-left">重庆万州F006</div>
                                                    </el-tooltip>
                                                    <img src="@/assets/img/xq2.png" class="flex-right"
                                                        style="width: 18px;height: 18px;margin-left: 2px;" />
                                                </div>
                                                <div class="flex-center tooltip">
                                                    <el-tooltip effect="dark" content="重庆万州F006" placement="top">
                                                        <div class="ellipsis-text flex-left">重庆万州F006</div>
                                                    </el-tooltip>
                                                    <img src="@/assets/img/xq2.png" class="flex-right"
                                                        style="width: 18px;height: 18px;margin-left: 2px;" />
                                                </div>

                                            </el-scrollbar>
                                        </div>
                                    </template>

                                </el-popover>


                                <img class="cursor" src="@/assets/img/delete-bin1.png"
                                    style="width: 20px;height: 20px; margin: 0 5px;" @click.stop.prevent v-show="scope.row.state == 0"/>
                                <img  class="cursor" src="@/assets/img/delete-bin2.png"
                                    style="width: 20px;height: 20px; margin: 0 5px;" @click.stop.prevent v-show="scope.row.state == 1"/>
                                <div v-show="scope.row.state == 0" class="result flex-center" @click.stop.prevent> <img
                                        src="@/assets/img/select1.png" style="width: 20px;height: 20px; margin-right: 5px;"
                                        @click.stop.prevent />
                                    执行中</div>
                                <div v-show="scope.row.state == 1" class="result flex-center" @click.stop.prevent> <img
                                        src="@/assets/img/select2.png" style="width: 20px;height: 20px; margin-right: 5px;"
                                        @click.stop.prevent />
                                    未执行</div>

                            </div>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="detect-detail" v-show="detectShow">
                    <el-form :model="form" label-width="80px">
                        <el-form-item label="方案名称:">
                            <div class="name">方案名称</div>
                        </el-form-item>

                        <el-form-item label="选择电台:">
                            <el-col :span="14">
                                <el-select v-model="masterIndex" placeholder="平台" class="p-i3"
                                    style="height: 38px;width:500px">
                                    <el-option v-for="item in master" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-col>
                        </el-form-item>

                        <el-form-item label="执行日期:">
                            <el-col :span="14">


                                <el-date-picker v-model="value1" class="p-13" type="daterange" range-separator="至"
                                    style="height: 38px;width:250px" start-placeholder="开始日期" end-placeholder="结束日期">
                                </el-date-picker>
                            </el-col>
                            <el-col class="line" :span="9" style="text-align: right; color: #9A9DAA;">
                                <el-button color="#00BBF0" style="color:white;width:80px;height:35px;" round>保存</el-button>
                            </el-col>

                        </el-form-item>



                    </el-form>

                    <div class="monitor-table">
                        <el-table :data="tableData" :header-cell-style="{ background: '#1E2435' }">
                            <el-table-column prop="time" label="时段" align="center" width="180" />
                            <el-table-column prop="state" label="始频率" align="center" />
                            <el-table-column prop="state" label="终频率" align="center" />
                            <el-table-column prop="state" label="执行次数" align="center" />

                            <el-table-column label="操作" align="center">
                                <template #default="scope">
                                    <div class="flex-img">
                                        <img src="@/assets/img/compile.png" @click="setTask(true, scope.row)"
                                            style="width: 20px;height: 20px;" />
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>


                    <div class="flex" style="margin-top: 20px;">
                        <button class="oval-button flex-left" style="background: #FABD68;">创建副本</button>
                        <button class="oval-button flex-right"
                            style="background: none;border: solid 1px white;margin: 0;">上传Excel</button>
                        <button class="oval-button flex-right"
                            style="background: none;border: solid 1px white;margin: 0 0 0 20px;"
                            @click="setTask(true, null)">添加任务</button>
                    </div>

                </div>
            </div>

        </div>
        <div class="detect-pagination flex" :class="detectShow ? 'detect-pagination2' : ''">
            <div class="flex-left" style="margin-left: 20px; color: #9A9DAA;">共有{{ total }}项数据</div>
            <el-pagination class="flex-right" layout="prev, pager, next, jumper" style="margin-right: 50px;" :total="total"
                small />
        </div>


        <div class="popup-custom flex" v-show="taskData.visible" style="z-index: 2000;">
            <div class="flex-right popup-main">
                <div class="custom-headline flex-s">
                    <div class="flex-left text1 cursor flex-items" @click="setTask(false, null)">
                        <img src="@/assets/img/right.png" style="width: 20px;height: 20px;" /> 返回
                    </div>
                    <div class="flex-right text2">{{ taskData.title }}</div>
                </div>
                <div class="custom-body" v-show="taskData.receptionIndex == 0">
                    <div class="flex bg-no">
                        <div class="custom-text">接发状态:</div>
                        <el-select v-model="taskData.receptionIndex" placeholder="平台" class="p-i3"
                            style="width:300px;margin-right: 20px;">
                            <el-option v-for="item in taskData.reception" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                        <div class="custom-text">接发状态:</div>
                        <el-select v-model="masterIndex" placeholder="平台" class="p-i3" style="width:200px">
                            <el-option v-for="item in master" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </div>

                    <div class="bg-black ">
                        <div class="flex">
                            <div class="custom-text">编码方式:</div>
                            <el-select v-model="taskData.codingIndex" placeholder="平台" class="p-i3"
                                style="width:200px;margin-right: 20px;">
                                <el-option v-for="item in taskData.coding" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                            <div class="custom-text">{{ taskData.codingIndex == 0 ? '参考类型' : '包数' }}:</div>
                            <el-select v-model="masterIndex" placeholder="平台" class="p-i3" style="width:200px"
                                v-show="taskData.codingIndex == 0">
                                <el-option v-for="item in master" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>

                            <el-select v-model="masterIndex" placeholder="平台" class="p-i3" style="width:200px"
                                v-show="taskData.codingIndex == 1">
                                <el-option v-for="item in master" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </div>

                        <div class="flex" v-show="taskData.codingIndex == 0">
                            <div class="custom-text">发送内容:</div>
                            <el-select v-model="masterIndex" placeholder="平台" class="p-i3"
                                style="width:350px;margin-right: 20px;">
                                <el-option v-for="item in master" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                            <div class="custom-text">内容编码:</div>
                            <el-select v-model="masterIndex" placeholder="平台" class="p-i3" style="width:200px">
                                <el-option v-for="item in master" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="flex" v-show="taskData.codingIndex == 1">
                            <div class="custom-text flex-items" style="font-weight: 700;color: #2CA6E0;margin-left: 80px;">
                                <img src="@/assets/img/folder-upload.png"
                                    style="height: 30px;width: 30px;margin-right: 10px;" />
                                上传发送音频
                            </div>
                            <div class="custom-text">文件名.wav(56kb)</div>
                        </div>
                    </div>

                    <div class="bg-no">
                        <div class="flex">
                            <div class="custom-text">通信:</div>
                            <el-select v-model="masterIndex" placeholder="平台" class="p-i3"
                                style="width:100px;margin-right: 20px;">
                                <el-option v-for="item in master" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                            <div class="custom-text">功率:</div>
                            <el-select v-model="masterIndex" placeholder="平台" class="p-i3" style="width:100px">
                                <el-option v-for="item in master" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </div>

                        <div class="flex" style="margin-top: 10px;">
                            <div class="custom-text">评率:</div>
                            <el-select v-model="masterIndex" placeholder="平台" class="p-i3" style="width:200px;">
                                <el-option v-for="item in master" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                            <div style="margin-left: 10px;margin-right: 20px; color: #9A9DAA;">MHz</div>
                            <div class="custom-text">宽带:</div>
                            <el-select v-model="masterIndex" placeholder="平台" class="p-i3" style="width:200px">
                                <el-option v-for="item in master" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                            <div style="margin-left: 10px; color: #9A9DAA;">kHz</div>

                        </div>

                    </div>

                    <button class="oval-button oval-button-custom" style="height: 40px;">确定</button>
                </div>

                <div class="custom-body" v-show="taskData.receptionIndex == 1">
                    <div class=" bg-no">
                        <div class="flex">
                            <div class="custom-text">接发状态:</div>
                            <el-select v-model="taskData.receptionIndex" placeholder="平台" class="p-i3"
                                style="width:100px;margin-right: 20px;">
                                <el-option v-for="item in taskData.reception" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                            <div class="custom-text">解码方式:</div>
                            <el-select v-model="taskData.decodeIndex" placeholder="平台" class="p-i3" style="width:150px">
                                <el-option v-for="item in taskData.decode" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                            <div class="custom-text">音频模式:</div>
                            <el-select v-model="masterIndex" placeholder="平台" class="p-i3" style="width:120px">
                                <el-option v-for="item in master" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </div>

                        <div class="flex">
                            <div class="custom-text">执行时间:</div>
                            <el-time-picker v-model="value1" style="width: 100px;height: 40px;margin-top: 5px;"
                                :picker-options="{
                                    selectableRange: '18:30:00 - 20:30:00'
                                }" placeholder="执行时间">
                            </el-time-picker>
                            <div class="custom-text" v-show="taskData.decodeIndex == 0">接收时长:</div>
                            <el-input class="p-i3" v-show="taskData.decodeIndex == 0" v-model="copyData.form.name"
                                style="width: 100px;height: 40px;margin-top: 5px;"></el-input>
                            <div style="margin-left: 10px; color: #9A9DAA;line-height: 50px;">秒</div>
                        </div>


                        <div class="flex">
                            <div class="custom-text">频率:</div>
                            <el-input class="p-i3" v-model="copyData.form.name"
                                style="width: 100px;height: 40px;margin-top: 5px;"></el-input>
                            <div style="margin-left: 10px; color: #9A9DAA;line-height: 50px;">MHz</div>

                            <div class="custom-text" v-show="taskData.decodeIndex == 0">信道:</div>
                            <el-select v-model="masterIndex" placeholder="平台" class="p-i3" style="width:100px"
                                v-show="taskData.decodeIndex == 0">
                                <el-option v-for="item in master" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </div>

                    </div>



                    <button class="oval-button oval-button-custom" style="height: 40px;">确定</button>
                </div>

            </div>
        </div>

        <div class="popup-custom flex" v-show="copyData.visible">
            <div class="flex-right popup-main">
                <div class="custom-headline flex-s">
                    <div class="flex-left text1 cursor flex-items" @click="setCopy(false, null)">
                        <img src="@/assets/img/right.png" style="width: 20px;height: 20px;" /> 返回
                    </div>
                    <div class="flex-right text2">{{ copyData.title }}</div>
                </div>
                <div class="custom-body">
                    <div class=" bg-no">
                        <div class="flex">
                            <div class="custom-text2">方案名称:</div>
                            <el-input class="p-i3" v-model="copyData.form.name"
                                style="width: 650px;height: 40px;"></el-input>
                        </div>

                        <div class="flex" style="margin-top: 10px;">
                            <div class="custom-text">选择电台:</div>
                            <el-select v-model="copyData.optionsIndex" multiple filterable allow-create default-first-option
                                style="width: 650px;" placeholder="选择电台">
                                <el-option v-for="item in copyData.options" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>

                        <div class="flex" style="margin-top: 10px;">
                            <div class="custom-text2">执行日期:</div>
                            <div style="width:400px">
                                <el-date-picker v-model="value1" class="p-13" type="daterange" range-separator="至"
                                    style="height: 38px;" start-placeholder="开始日期" end-placeholder="结束日期">
                                </el-date-picker>
                            </div>
                            <div>
                                <button class="oval-button flex-right"
                                    style="background: none;border: solid 1px white;margin-left: 130px; height: 40px;line-height: 40px;">添加任务</button>
                            </div>

                        </div>
                        <div class="popup-table">
                            <el-table :data="tableData" :header-cell-style="{ background: '#1E2435' }">
                                <el-table-column prop="time" label="时段" align="center" width="180" />
                                <el-table-column prop="state" label="始频率" align="center" />
                                <el-table-column prop="state" label="终频率" align="center" />
                                <el-table-column prop="state" label="执行次数" align="center" />

                                <el-table-column label="操作" align="center">
                                    <template #default="scope">
                                        <div class="flex-img">
                                            <img src="@/assets/img/compile.png" @click="setTask(true, scope.row)"
                                                style="width: 20px;height: 20px;" />
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="flex" style="margin-top: 10px;">
                            <button class="oval-button flex-left"
                                style="background: none;border: solid 1px white; height: 40px;line-height: 40px;"
                                @click="setCopy(false, null)">取消</button>
                            <button class="oval-button flex-right" style="height: 40px;line-height: 40px;">确定</button>
                        </div>

                    </div>

                </div>
            </div>
        </div>


    </div>
</template>
    
<script>
import ResultList from '@/components/detect/set/resultList.vue';
import RightList from '@/components/detect/set/rList.vue';

export default {
    props: {

    },
    name: 'TelegramListFull',
    data() {
        return {
            search: '',
            total: 1000,
            tableData: [
                { id: 'f001', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 1 },
                { id: 'f002', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 1 },
                { id: 'f003', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 1 },
                { id: 'f004', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 0 },
                { id: 'f005', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 1 },
                { id: 'f006', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 0 },
                { id: 'f007', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 0 },
                { id: 'f008', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 0 },
                { id: 'f009', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 1 },
                { id: 'f010', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 0 },
                { id: 'f011', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 0 },
                { id: 'f012', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 1 },
                { id: 'f013', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 1 },
                { id: 'f014', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 0 },
                { id: 'f015', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 1 },
                { id: 'f016', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 1 },
                { id: 'f017', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 0 },
                { id: 'f018', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 1 },
                { id: 'f019', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 0 },
                { id: 'f020', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 0 },
                { id: 'f021', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 0 },
                { id: 'f022', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 1 },
                { id: 'f023', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 1 },
                { id: 'f024', name: '重庆渝北001探测名字无呜呜亢', time: '20231021 13:20:0', state: 1 },
            ],
            selectedRow: null,
            form: null,
            masterIndex: 1,
            detectShow: false,//右边详细栏
            master: [{ name: "名字1", id: 1 }, { name: "名字2", id: 2 }, { name: "名字2", id: 3 },],
            query: { data: null, text: "", state: 1 },
            currentPage: 5,
            pageSize: 5,
            disabled: false,
            taskData: {
                visible: false,
                gridData: [],
                title: "",
                receptionIndex: 0,
                reception: [
                    { id: 0, name: '接收' },
                    { id: 1, name: '发送' }
                ],

                codingIndex: 0,
                coding: [
                    { id: 0, name: 'LORE' },
                    { id: 1, name: 'CO' }
                ],
                decodeIndex: 0,
                decode: [
                    { id: 0, name: 'CO' },
                    { id: 1, name: 'LORA' }
                ]
            },
            copyData: {
                visible: false,
                gridData: [],
                title: '',
                form: {
                    name: null,
                },
                optionsIndex: 0,
                options: [{
                    value: 1,
                    label: '万州HF001'
                }, {
                    value: 2,
                    label: '万州HF002'
                }, {
                    value: 3,
                    label: '新疆HF003'
                }],
            },
            addVisible: false,
            value1: '',
        }
    },
    components: {
        ResultList,
        RightList
    },

    methods: {
        setListShow() {
            // this.$emit('setListShow', false);
        },
        tableRowClass(value) {
            // console.log(value);
        },
        getRowClassName({ row }) {
            return row === this.selectedRow ? 'click' : '';
        },
        // 处理行点击事件
        handleRowClick(row) {
            this.detectShow = true;
            this.form = row;
            this.selectedRow = row;
        },
        setTask(value, row) {
            this.taskData.visible = value;
            if (row == null) {
                this.taskData.title = '传输任务新增'
            } else {
                this.taskData.title = '传输任务修改'
            }
        },
        setCopy(value, row) {
            this.copyData.visible = value;
            if (row == null) {
                this.copyData.title = '传输任务方案'
            } else {
                this.taskData.title = '传输任务修改'
            }
        },
        setAddVisible(value) {
            if (value) {//新增
                this.addVisible = true;
            } else {//提交
                this.addVisible = false;
            }
        },
        handleInput() {
            this.compile.num = this.compile.num.replace(/[^\d.]/g, ''); // 清除非数字和点
            this.compile.num = this.compile.num.replace(/^\./g, ''); // 首位不能是点
            this.compile.num = this.compile.num.replace(/\.{2,}/g, '.'); // 保证只有一个点
            this.compile.num = this.compile.num.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.'); // 保证小数点只出现一次
            this.compile.num = this.compile.num.replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); // 保留两位小数
        },


    }
}
</script>

<style lang="scss">
.detect-box {
    background: linear-gradient(to left, #1D2435, #2C334C);

    // 去除日期选择器样式
    .el-input__wrapper {
        --el-input-border: none;
        --el-input-border: none;
        background-color: #171D2C;
        box-shadow: 0 0 0 0;
    }

    /* //此代码是让每行左侧变圆 */
    .el-table .el-table__row td:first-child {
        border-radius: 50px 0 0 50px;
        padding: 2px;
        z-index: 999;
        padding-left: 20px;
    }

    /* //此代码是让每行右边侧变圆 */
    .el-table .el-table__row td:last-child {
        border-radius: 0 50px 50px 0;
        z-index: 999;
        padding: 2px;
    }

    .el-select {
        margin: 5px 0;
        --el-select-input-focus-border-color: none;
        --el-select-border-color-hover: none;

    }

    .de-data .el-input__wrapper,
    .detect-search .el-input__wrapper {
        border-radius: 50px;
        margin: 0 10px;
        background: #394760;
        color: #9A9DAA;
    }

    .detect-search .el-input__inner {
        // margin-top: 4px;
        color: #9A9DAA;
    }

    // 点击事件
    .click.el-table__row td:last-child {
        border-radius: 0 0 0 0;
        z-index: 999;
    }


    .click.el-table__row td {
        background-color: #161B27 !important;
    }

    .click.el-table__row {
        background-color: #161B27 !important;
    }

    .click.el-table__row td:first-child {
        border-radius: 50px 0 0 50px;
        padding: 2px;
        z-index: 999;
        padding-left: 20px;
    }

    .click.el-table__row td:last-child {
        border-radius: 0 0px 0px 0;
        z-index: 999;
        padding: 2px;
    }

    // 新增
    .el-dialog__header {
        margin-right: 0;
        background: linear-gradient(to right, #313B53, #272F43);

    }

    .el-dialog__title {
        color: #9A9DAA;
        font-size: 14px;
    }

    .el-dialog {
        --el-dialog-bg-color: linear-gradient(to right, #2C334C, #1D2435);
    }

    .add-form {

        .el-input__wrapper {
            border-radius: 50px;
            background-color: #394760;

        }

        .el-form-item {
            align-items: center;
        }

        .el-input__inner {
            color: #EDEDED;
        }



        .add-list {
            height: 200px;
            background: #1D232F;
            width: 398px;
            position: relative;
            left: -19px;


            .add-button {
                width: 398px;
                display: flex;
                flex-wrap: wrap;

                .add-li {
                    color: white;
                    width: 75px;
                    height: 35px;
                    background: #2B526F;
                    border-radius: 30px;
                    padding: 0 5px;
                    margin: 10px 5px;
                }

                .add-input {
                    width: 85px;
                    height: 35px;
                    margin: 10px 5px;
                    font-size: 12px;
                    font-size: 18px;
                }
            }
        }






        .add-end {
            margin: 30px 0 0 10px;
            width: 100%;

            .oval-button {
                margin: 0 5px;
                height: 40px;
            }
        }
    }
}


.detect-table {
    height: calc(100% - 100px);

    .detect-table-box {
        height: calc(100% - 150px);
    }

    background: linear-gradient(to left, #1D2435, #2C334C);

    .el-table tr {
        background-color: none;
        background: none;
    }

    .state {
        width: 78px;
        height: 24px;
        line-height: 24px;
        font-size: 12px;
        border-radius: 30px;
        color: white;
        cursor: pointer;
        /* 修改光标样式为手型 */
        margin: 0 2px;
        white-space: nowrap;
    }

    .state0 {
        background: #036EB7;
        border: solid 1px #74C8CE;
    }

    .state1 {
        background: #FABD68;
        border: solid 1px #FBD580;
    }

    .result {
        margin: 0 2px;
        cursor: pointer;
        /* 修改光标样式为手型 */
        white-space: nowrap;
    }

}

// 详细列表
.detect-detail {
    width: 1000px;
    background: #161B27;
    border-radius: 5px;
    padding: 20px;

    .el-form-item__label {
        color: #9A9DAA;
        font-size: 14px;
        line-height: 40px;
    }

    .name {
        background: #2CA6E0;
        width: 100%;
        border-radius: 20px;
        color: white;
        padding: 10px;
        line-height: 20px;
        padding-left: 20px;
    }

    .el-input__wrapper {
        background-color: #394760;
        border: none;
        box-shadow: none;
        border-radius: 20px;
    }

    .el-input__inner {
        color: white;
        height: 35px;
    }

    .monitor-table {
        width: 100%;

        .el-table {
            height: 100%;
            font-size: 12px;
        }

        .cell {
            margin: 0px 0;
        }



        .el-table .el-table__row td:first-child {
            border-radius: 0px 0 0 0px;
            padding-left: 0px;
        }

        .el-table .el-table__row td:last-child {
            border-radius: 0 0px 0px 0;
        }

    }
}


.detect-result {
    background: linear-gradient(to top, #2C334C, #1D2435);
    height: 200px;
    padding: 5px;

    .tooltip {
        margin-top: 5px;
    }

    .ellipsis-text {
        white-space: nowrap;
        /* 不换行 */
        overflow: hidden;
        /* 超出部分隐藏 */
        text-overflow: ellipsis;
        /* 显示省略号 */
    }
}


// 分页
.detect-pagination {
    width: 100%;
    position: absolute;
    bottom: 10px;
}

.detect-pagination2 {
    width: calc(100% - 700px);
}


.serve-select {
    .monitor-table {
        height: calc(100% - 250px);

        .el-table {
            // --el-table-border:#575D73;
            // --el-table-border-color: #575D73;
            --el-table-border: solid 1px;
            // border-bottom: solid 1px #575D73;
        }

        .el-table .el-table__row {
            background: none;
            color: #9A9DAA;
        }

    }

    .el-range-input {
        color: white;

    }

    .el-range-separator {
        color: white;

    }

    .popup-custom {
        .popup-main {
            width: 800px;
            height: 100vh;

            .custom-text {
                text-align: right;
                line-height: 50px;
                margin-right: 10px;
                color: #9A9DAA;
                width: 80px;
            }

            .custom-text2 {
                text-align: right;
                line-height: 40px;
                margin-right: 10px;
                color: #9A9DAA;
                width: 80px;
            }

            .el-input__inner {
                height: 40px;
                color: #EDEDED;
            }

            .el-input__wrapper {
                border-radius: 30px;
                background-color: #394760;
            }

            .bg-no {
                padding: 20px 40px;
            }

            .bg-black {
                padding: 20px 40px;
                background-color: #222A3A;
            }

            .oval-button-custom {
                position: absolute;
                bottom: 20px;
                right: 20px;
            }

            .el-tag--info {
                background-color: #2B526F;
                border-radius: 40px;
                color: white;
            }

            .el-tag__close {
                color: #2B526F;
                background: #FBD580;
            }

            .popup-table {
                .el-table {
                    height: calc(100vh - 300px);
                    --el-table-bg-color: none;
                    --el-table-border-color: none;
                    --el-table-tr-bg-color: none;
                    --el-table-row-hover-bg-color: none;
                    --el-table-border: solid 1px;
                    --el-table-text-color: #9A9DAA;

                }

                .el-table .el-table__row td:first-child {
                    border-radius: 0;
                    padding: 0px;
                    z-index: 999;
                    padding-left: 0px;
                }

                .el-table .el-table__row td:last-child {
                    border-radius: 0;
                    padding: 0px;
                    z-index: 999;
                    padding-left: 0px;
                }


            }

        }
    }
}
</style>
    